<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer"
        />

        <q-toolbar-title>
          智慧校园
        </q-toolbar-title>
        <q-btn  @click="handleLogout">
          <q-icon name="logout" />
          <q-tooltip class="bg-accent">退出登录</q-tooltip>
        </q-btn>

      </q-toolbar>
    </q-header>

    <q-drawer
      :mini="miniState"
      @mouseover="miniState = false"
      @mouseout="miniState = true"
      v-model="leftDrawerOpen"
      show-if-above
      bordered
    >
      <q-list>
        <q-item-label
          header
        >
          Essential Links
        </q-item-label>

        <EssentialLink
          v-for="link in linksList"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useLoginStore } from 'src/stores/login-store.js'
import { useRouter } from 'vue-router'
import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue'

let loginStore = useLoginStore()
const router = useRouter()

defineOptions({
  name: 'MainLayout'
})
const miniState = ref(false)

const linksList: EssentialLinkProps[] = [
  {
    title: '数据管理',
    caption: 'quasar.dev',
    icon: 'school',
    link: 'import'
  },
  {
    title: '测量工具',
    caption: 'quasar.dev',
    icon: 'school',
    link: 'measure'
  },
  {
    title: '查询与搜索',
    caption: 'forum.quasar.dev',
    icon: 'help_outline',
    link: 'query'
  },
  {
    title: '路线规划',
    caption: 'quasar.dev',
    icon: 'book',
    link: 'road'
  }
]

const leftDrawerOpen = ref(false)
const handleLogout = () => {
  loginStore.logout()
  router.push({path: '/login'})
}
function toggleLeftDrawer () {
  leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>
